<template>
  <div class="app-container">
    <el-card shadow="always" :body-style="{ padding: '20px' }">
      <div slot="header">
        <span>批量导入员工</span>
      </div>
      <!-- card body -->
      <UploadExcel :on-success="handleSuccess" :before-upload="beforeUpload" />
      <el-table :data="tableData" border highlight-current-row style="width: 100%;margin-top:20px;">
        <el-table-column v-for="item of tableHeader" :key="item" :prop="item" :label="item" />
      </el-table>
    </el-card>
  </div>
</template>

<script>
import UploadExcel from '@/components/UploadExcel'
// 上传员工exp接口方法
import { importEmployeesAPI } from '@/api/employees'
// 导入excle中文转英文和excle时间格式化
import { transformKeys } from '@/utils'
export default {
  components: {
    UploadExcel
  },
  data() {
    return {
      tableData: [],
      tableHeader: []
    }
  },
  methods: {
    beforeUpload(file) {
      const isLt1M = file.size / 1024 / 1024 < 1

      if (isLt1M) {
        return true
      }

      this.$message({
        message: '上传的文件大小需小于1m',
        type: 'warning'
      })
      return false
    },
    async handleSuccess({ results, header }) {
      this.tableData = results
      this.tableHeader = header
      console.log('excl', results, header)
      const maps = {
        '入职日期': 'timeOfEntry',
        '聘用形式': 'formOfEmployment',
        '手机号': 'mobile',
        '姓名': 'username',
        '转正日期': 'correctionTime',
        '工号': 'workNumber',
        '部门': 'departmentName'
      }
      const exc = transformKeys(results, maps, ['timeOfEntry', 'correctionTime'])
      console.log(exc)
      await importEmployeesAPI(exc)
      //   this.tableData = results
      //   this.tableHeader = header
      this.$router.push('/employees')
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
